Google 地图 JavaScript API（三） | Renko's blog | 人生如逆旅，我亦是行人

根据udacity课程学习的笔记。

教程和文档

Google Maps JavaScript API V3 Reference

1. 静态地图和街道地图成像

Google 静态地图 API
Google Static Maps API

Google 街道视图图像 API
Street View Image API

// 点击标识时弹出信息窗口。
function populateInfoWindow(marker, infowindow) {
  // 检查信息窗口还没有在这个标识打开
  if (infowindow.marker != marker) {
    infowindow.marker = marker;
    infowindow.setContent('<div>' + marker.title + '</div>');
    infowindow.open(map, marker);
    // 确保信息窗口关闭时已清空marker属性值
    infowindow.addListener('closeclick', function() {
      infowindow.setMarker = null;
    });
    //此服务根据离标记最近的位置获取全景图像
    //并找出相机朝向、角度(heading,pitch)
    var streetViewService = new google.maps.StreetViewService();
    //寻找街景图像的范围
    var radius = 50;

    function getStreetView(data, status) {
      if (status == google.maps.StreetViewStatus.OK) {
        //取最近的街景位置
        var nearStreetViewLocation = data.location.latLng;
        //计算相机方向，要在加载api时添加&libraries=geometry以使用谷歌地图的几何库
        var heading = google.maps.geometry.spherical.computeHeading(
          nearStreetViewLocation, marker.position);
        infowindow.setContent('<div>' + marker.title + '</div><div id="pano"></div>');
        //设置全景选项
        var panoramaOptions = {
          //最近的街景位置
          position: nearStreetViewLocation,
          //视角
          pov: {
            heading: heading,
            pitch: 30
          }
        };
        //创建街景并将它放在id为pano的div处的信息窗口
        var panorama = new google.maps.StreetViewPanorama(
          document.getElementById('pano'), panoramaOptions);
      } else {
        //如果没有找到街景就在信息窗口放入说明信息
        infowindow.setContent('<div>' + marker.title + '</div>' +
          '<div>No Street View Found</div>');
      }
    }

    streetViewService.getPanoramaByLocation(marker.position, radius, getStreetView);
    infowindow.open(map, marker);
  }
}

请求geometry library

<script async defer
    src=
    "https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&libraries=geometry&v=3&callback=initMap">
</script>

街道视图图像请求示例
outdoor Url

https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.414382,10.013988&heading=151.78&pitch=-0.76&key=YOUR_API_KEY

indoor Url

https://maps.googleapis.com/maps/api/streetview?size=600x300&location=41.403609,2.174448&heading=100&pitch=28&scale=2&key=YOUR_API_KEY

2. 库

Maps JavaScript API 库

Maps API 的 JavaScript 代码通过https://maps.googleapis.com/maps/api/js 形式的引导程序 URL 进行加载。此引导程序请求会加载所有供在 Maps API 中使用的主要 JavaScript 对象和符号。此外，明确请求时才会加载的自包含内容库中也提供了一些 Maps API 功能。将辅助组件分解成内容库可使主 API 快速加载（和解析）；您只会招致在必要时加载和解析内容库的额外开销。

您可以通过指定 libraries 参数并向其传递内容库的名称，指定要在引导程序请求内加载的其他内容库。可以逗号分隔列表形式指定多个内容库。加载后的内容库通过 google.maps.libraryName 命名空间进行访问。

drawing 提供了一个图形界面，以供用户在地图上绘制多边形、矩形、多段线、圆和标记。文档。
geometry 包括用于计算地球表面上标量几何值（如距离和面积）的应用函数。文档。
places 让您的应用能够在定义的区域内搜索场所、地理位置或著名景点等地点。文档。
visualization 提供数据的视觉表示，包括热图和 Google Maps Engine 数据。文档。

几何库
在站点中加载 JavaScript API 时，可通过指定

几何库不 包含任何类，但包含以下三个命名空间中的 方法：

    - [球形][31] 包含球形几何实用程序，以便允许你计算 球面的角度、距离、偏航角和面积。 其中的一些示例有：`computeArea`，该方法接受多边形路径（以 lat/lng 对集合的形式）， 计算面积；或者为`computeDistanceBetween`， 该方法接受两个 lat/lng 点，计算地球上这两点之间的距离（考虑地球的曲率）。

    - [多边形][32] 包含涉及多边形和折线的实用计算函数， 从而确定点是位于多边形内，还是 位于指定距离的折线上。
     
    - [编码][33] 包含根据 [编码多线段算法][34] 对多线段路径进行编码和解码的实用程序。

2. 可视化
在站点中加载 JavaScript API 时， 可通过指定`` "libraries=visualizations"`` 加载可视化库。该库中包含 `HeatmapLayer` 类， 使你能够在给定地理点可视化数据强度。 注释：
    - 使用此类时，通常有一个要可视化的数据集 
    - 可将数据存储在客户端，但如果数据集过大，可能会降低         站点的性能，也可将数据存储在服务器端，并进行动态访问， 但你会损失一些客户端数据操作选项

3. 绘图库
[DrawingManagerOptions object specification][35]

    ```javascript
    <script async defer
        src=
        "https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=MYAPIKEY&v=3&callback=initMap">
    </script>

<div>
  <input type="button" id="show-listings" value="show listings">
  <input type="button" id="hide-listings" value="hide listings">
  <hr>
  <span class="text">Draw a shape to search within it for dorm!</span>
  <!-- 打开和关闭绘图工具 -->
  <input id="toggle-drawing" type="button" value="Drawing Tools">
</div>

1 2	//确保只有一个多边形被渲染 var polygon = null;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//在初始化函数中创建新对象drawingManager
var drawingManager = new google.maps.drawing.DrawingManager({
  //默认绘图模式
  drawingMode: google.maps.drawing.OverlayType.POLYGON,
  drawingControl: true,
  drawingControlOptions: {
    //地图上控件的位置
    position: google.maps.ControlPosition.TOP_LEFT,
    //指定多个绘图模式 此处为多边形绘图
    //其他绘图模式：'marker', 'polyline', 'rectangle', 'circle', or null.
    drawingModes: [
      google.maps.drawing.OverlayType.POLYGON
    ]
  }
});


1
2
3
4
//添加事件：单击按钮时隐藏或显示绘图工具
document.getElementById('toggle-drawing').addEventListener('click',function () {
  toggleDrawing(drawingManager);
});


1
2
3
4
5
6
7
8
9
10
11
function toggleDrawing(drawingManager) {
  if (drawingManager.map) {
    drawingManager.setMap(null);
    //将覆盖区域删除，保留标记
    if (polygon !== null) {
      polygon.setMap(null);
    }
  }else {
      drawingManager.setMap(map);
    }
}


1
2
3
4
5
6
7
8
9
10
11
//使用用户所画的多边形和标记位置，并使用更多几何库功能检查多边形内是否有标记
function searchWithinPolygon() {
  for (var i = 0; i < markers.length; i++) {
    //有标记则显示，没有在则隐藏
    if (google.maps.geometry.poly.containsLocation(markers[i].position, polygon)) {
      markers[i].setMap(map);
    } else {
      markers[i].setMap(null);
    }
  }
}


1
2
3
//查询polygon的area
var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
window.alert(area+'this is polygon area');